export var name = "sc1";//快捷回复
export function render() {
  return `
        <style>
       .cs-top{  // 修正命名
        width: 100%;
        height: 100%;
       }
       .cs——top strong{
        font-size: 14px;
        font-weight: bold;
        color: #333;
        float: left;
        margin-left: -12px;
        margin-top: -9px;
       }
       .cs——top div{
        float: right;
        margin-right: 60px;
        margin-top: -8px;
       }
       .cs_ce{
        margin-left: -12px;
        display: flex;
        margin-top: 20px;
       }
       .cs_ce :nth-child(1){
        
        width: 40px;
        height: 40px;
        background-color: #00a86b;
        border-radius: 10px;
        line-height: 40px;
        text-align: center;
        color: #fdfcfc;
        display: none;
       }
       /* 移除原 :nth-child(2) 选择器，替换为按钮类选择器 */
       .add-reply-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        padding: 0 16px; /* 使用内边距替代固定宽度，适配文本 */
        background-color: #b210f1;
        border-radius: 5px;
        color: white;
        border: none;
        cursor: pointer;
        margin-left: 10px;
        font-size: 14px;
        transition: background-color 0.2s ease; /* 平滑过渡效果 */
       }
       .add-reply-btn:hover {
        background-color: #9a0dc8; /*  hover 时加深背景色 */
       }
       .add-reply-btn:active {
        background-color: #850ba9; /* 点击时进一步加深 */
       }
        </style>
         <div class="cs——top">
        <strong>快捷回复</strong>
        <div><input type="text" placeholder="请输入搜索名称"></div>
         </div>
        <div class="cs_ce">
        <span>刷新</span>
        <button class="add-reply-btn">+添加回复</button>
         </div>
         
        <div class="custom-table-container">
          <table class="custom-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>名称</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>更新时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    `
}
export function afterRender() {
  // 初始化本地存储
  if (!localStorage.getItem('replyData')) {
    const initialData = [
      { id: 1, name: '示例回复1', status: 'active', createTime: '2023-10-01 10:30:00', updateTime: '2023-10-01 10:30:00' },
      { id: 2, name: '示例回复2', status: 'disabled', createTime: '2023-10-02 14:15:00', updateTime: '2023-10-02 14:15:00' }
    ];
    localStorage.setItem('replyData', JSON.stringify(initialData));
  }

  // 获取数据并渲染表格
  function renderTable() {

    const data = JSON.parse(localStorage.getItem('replyData') || '[]');
    const tbody = document.querySelector('.custom-table tbody');
    if (!tbody) return;

    tbody.innerHTML = data.map(item => `
      <tr data-id="${item.id}">
        <td>${item.id}</td>
        <td class="editable" data-field="name">${item.name}</td>
        <td>
          <span class="status-${item.status}">${item.status === 'active' ? '启用' : '禁用'}</span>
        </td>
        <td>${item.createTime}</td>
        <td>${item.updateTime}</td>
        <td>
          <button class="edit-btn">编辑</button>
          <button class="delete-btn">删除</button>
        </td>
      </tr>
    `).join('');
  }

  // 初始化时只绑定一次事件监听器
  const tableContainer = document.querySelector('.custom-table-container');
  if (tableContainer) {
    tableContainer.addEventListener('click', function (e) {
      const editBtn = e.target.closest('.edit-btn');
      const deleteBtn = e.target.closest('.delete-btn');

      if (editBtn) {
        const tr = editBtn.closest('tr');
        const tds = tr.querySelectorAll('.editable');
        const isEditing = tr.classList.contains('editing');

        if (isEditing) {
          // 保存编辑
          const id = parseInt(tr.dataset.id);
          const data = JSON.parse(localStorage.getItem('replyData') || '[]');
          const item = data.find(i => i.id === id);

          tds.forEach(td => {
            const field = td.dataset.field;
            item[field] = td.textContent;
          });

          item.updateTime = new Date().toLocaleString();
          localStorage.setItem('replyData', JSON.stringify(data));
          tr.classList.remove('editing');
          editBtn.textContent = '编辑';
          tds.forEach(td => {
            td.contentEditable = false;
            td.classList.remove('edit-active');
          });
          renderTable();
        } else {
          // 进入编辑模式
          tr.classList.add('editing');
          tds.forEach(td => {
            td.contentEditable = true;
            td.classList.add('edit-active');
          });
          editBtn.textContent = '保存';
        }
      } else if (deleteBtn) {
        const id = parseInt(deleteBtn.closest('tr').dataset.id);
        handleDelete(id);
      }
    });
  }

  // 删除功能实现
  function handleDelete(id) {
    if (confirm('确定要删除这条记录吗？')) {
      const data = JSON.parse(localStorage.getItem('replyData') || '[]');
      const newData = data.filter(item => item.id !== id);
      localStorage.setItem('replyData', JSON.stringify(newData));
      renderTable();
    }
  }

  // 添加回复按钮事件
  document.querySelector('.add-reply-btn').addEventListener('click', function () {
    const data = JSON.parse(localStorage.getItem('replyData') || '[]');
    const newId = data.length > 0 ? Math.max(...data.map(item => item.id)) + 1 : 1;
    const now = new Date().toLocaleString();

    const newItem = {
      id: newId,
      name: '新回复' + newId,
      status: 'active',
      createTime: now,
      updateTime: now
    };

    data.push(newItem);
    localStorage.setItem('replyData', JSON.stringify(data));
    renderTable();
  });

  // 刷新按钮事件
  const refreshBtn = document.createElement('button');
  refreshBtn.className = 'btn btn-primary refresh-btn';
  refreshBtn.textContent = '刷新表格';
  refreshBtn.style.marginLeft = '10px';
  document.querySelector('.cs_ce').appendChild(refreshBtn); // 调整到现有容器中

  refreshBtn.addEventListener('click', function () {

    renderTable();
  });


  renderTable();
}
